<template>
   <div id="SearchBox" class="flex">
      <div class="Search">

          <!-- 头部 -->
          <SearchHead  id="SearchHead" class="flex"/>

          

          <div class="content flex">
             
             <!-- 导航 -->
             <SearchNavi   id="SearchNavi" />

              <!-- 身体 -->
              <SearchBody id="SearchBody"/>
          </div>
      </div>
   </div>
</template>
<script>
import { mapMutations } from 'vuex'
import SearchBody from './SearchBody/SearchBody.vue'
import SearchHead from './SearchHead/SearchHead.vue'
import SearchNavi from './SearchNavi/SearchNavi.vue'
  export default 
  {
  components: { SearchNavi, SearchHead, SearchBody },
     name :'', 
     methods: {
      ...mapMutations('Search',['REFRESHDETAIL'])
     },

     beforeDestroy() {
       this.REFRESHDETAIL()
     },
  
  }
</script>
<style scoped lang='less'>
 /* 平板或手机 */
 @media screen and (max-width: 1000px){



   div.content #SearchNavi{
      width: 100%;
      height: var(--search-navi-height);

       display: flex;
       flex-wrap: nowrap;
       justify-content: flex-start;
        overflow: auto;

   }
   div.content #SearchBody{
      width: 100%;
      height: calc(100%  - var(--search-navi-height));
   }
 }

#SearchBox{
    margin-top: 60px;
    width: 100vw;
    height: calc(100vh - 60px);
    min-width: 400px;


    --search-head-height:60px;
   --search-navi-height:80px;
}
.Search{
    width: 90%;
    height: 90%;
    background: var(--BackColor);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--BoxShadow);

}
.content{
   width: 100%;
   height: calc(100% - var( --search-head-height));

}
// 头部
#SearchHead{
   width: 100%;
   height:var(--search-head-height);
   background: var(--GeneralBackColor);
   justify-content: space-between;
   padding: 0 10px;
   box-sizing: border-box;
   flex-wrap: nowrap;
}

// 导航
#SearchNavi{
    width: 200px;
    height: 100%;
    background: #efefef;
}

#SearchBody{
   width: calc(100% - 200px);
   height: 100% ;
    background: var(--GeneralBackColor-half);
    position: relative;
    overflow: auto;
}
</style>